<!-- 考勤统计 -->
<template>
  <a-card :bordered="false">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-form-item label="文件类型">
        <j-dict-select-tag
          v-model="queryParam.attachment_type"
          placeholder="请选择"
          dict-code="file_type"
          style="width:180px;"
        >
        </j-dict-select-tag>
      </a-form-item>
      <a-form-item label="密级">
        <j-dict-select-tag
          v-model="queryParam.secret_degree"
          placeholder="请选择"
          dict-code="file_serect_degree"
          style="width:180px;"
        >
        </j-dict-select-tag>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
      </a-form-item>
    </a-form>
    <vxe-grid
      id="ArchivesReturnList"
      ref="vxeTable"
      v-bind="options"
      :columns="columns"
      :data="dataSource"
      @toolbar-button-click="toolbarButtonClickEvent"
      @checkbox-all="onSelectChange"
      @checkbox-change="onSelectChange"
    >
      <template v-slot:toolbar_buttons>

      </template>
      <template v-slot:operate="{ row }">
        <a @click="handleSetSatatus(row)">归还</a>
        <!-- <a-divider type="vertical" />
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
          <a>删除</a>
        </a-popconfirm> -->
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="layouts"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
  </a-card>
</template>
<script >
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { filterDictTextByCache, filterDictText } from '@/components/dict/JDictSelectUtil'
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'ArchivesReturnList',
  mixins: [VxeTableMixin],
  components: {
    JSelectUserByDep
  },
  data() {
    return {
      columns: [],
      leftColums: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 }
      ],
      rightColums: [
        { field: 'operate', title: '操作', width: 80, slots: { default: 'operate' }}
      ],
      url: {
        list: '/online/cgreport/api/getColumnsAndData/1376559647303180289',
        edit: '/custom/backfile/'
      },
      isorter: {
        column: '',
        order: 'desc'
      },
      dictOptions: {}
    }
  },
  methods: {
    loadData() {
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      getAction(this.url.list, params).then(res => {
        if (res.success) {
          this.dictOptions = res.result.dictOptions
          this.getColumns(res.result.columns)
          this.dataSource = res.result.data.records
          this.ipagination.total = res.result.total
        }
        this.loading = false
      })
    },
    getColumns(columns) {
      const cols = []
      columns.forEach(item => {
        const col = {
          field: item.dataIndex,
          title: item.title,
          width: 100,
          showOverflow: true
        }
        if (this.dictOptions[item.dataIndex]) {
          col.slots = {
            default: ({ row, column }) => {
              return filterDictText(this.dictOptions[column.property], row[column.property])
            } }
        }
        cols.push(col)
      })
      this.columns = [].concat(this.leftColums, cols, this.rightColums)
      this.loadColumn()
    },
    loadColumn() {
      this.$nextTick(() => {
        this.$refs.vxeTable.loadColumn(this.columns)
      })
    },
    handleSetSatatus(row) {
      getAction(this.url.edit + row.file_code).then(res => {
        if (res.success) {
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>
